<template>
  <div class="">
    <div class="user_post" v-if="this.show_info.length>0">
      <div class="post " v-for="(post) in show_info" :key=post.post_id>
        <ul class="list-unstyled pl-3">
          <li class="media">
            <div class="media-body">
              <div class="row mt-4 mr-2">
                <div class="title col-md-8">
                  <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                    <a class="mb-1" href="javascript:void(0);" >{{post.post_title}}</a>
                  </router-link>
                </div>
              </div>
              <div class="content pt-2">
                <p>{{post.post_content}}</p>
              </div>
              <div class="row pt-3 fontclass mr-2" style="text-align: left;">
                <div class="col-md-8">
                </div>
                <div class="col-md-4" align="right">
                  <p style="color: #6b6e71;font-size: 17px;">编辑于 {{post.post_time}}</p>
                </div>
              </div>
            </div>
          </li>
          <div class="dropdown-divider"></div>
        </ul>
      </div>
    </div>

    <div class="noFile" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block pt-3 pb-3" v-show="this.show_info.length>0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="noteContainerPage"
          :page-size="noteContainerSize"
          layout="total, prev, pager, next"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getUserPostInfo} from '@/api/Discussion'


export default {
  name: "user_post",
  data(){
    return{
      imgs:{
        noInfo
      },
      user_id:this.$route.query.user_id,
      show_info:[],
      //分页
      noteContainerPage:0, // 分页的数据：当前页数
      noteContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      post_info:[],
      nullContainer: "暂无数据~",

    }
  },
  methods:{
    // 获该用于公开的记录本
    init(){
      getUserPostInfo({
        user_id:this.user_id
      }).then(res=>{
        this.post_info=res.data.data;
        this.getShowNote();
      })
    },
    //分页
    getShowNote(){
      this.noteContainerSize=parseInt(4);
      this.show_info = this.post_info.slice((this.noteContainerPage - 1) * this.noteContainerSize, this.noteContainerPage * this.noteContainerSize);
      this.total=parseInt(this.post_info.length);
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.noteContainerPage= parseInt(val);
      this.getShowNote();

    },

  },
  created() {
    let _this=this;
    _this.init();
    _this.noteContainerPage=parseInt(1);

  }
}
</script>

<style scoped>
.user_note_main{

}
/*记录本标题*/
.title a{
  font-size: 23px;
  font-weight: bold;
  color: black;
}
.title a:hover{
  color: #0f5da2;
}
.el-pagination {
  text-align: center;
}
/*无数据图*/
.noFile{
  padding-top: 200px;
  padding-bottom: 200px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
/*多行显示省略号，数字3为超出3行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
  font-size: 16px;
}
.content p:hover{
  color: black;
}
</style>
